<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  computed: {
    ...mapState({
      notification: state => state.order.notification,
      order: state => state.order.order
    })
  },
  watch: {
    notification(newV, oldV) {
      this.$notify({
        title: '新订单！',
        dangerouslyUseHTMLString: true,
        message: `<span>用户：${this.order.username}</span><br>
                  <span>地址：${this.order.region}${this.order.detail}</span>`,
        duration: 20000
      })
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }

}
</script>
